<template>
    <div class="main">
        <div class="dic_head">
            <div class="dic_add">
                <el-button type="primary" @click="event.Add">新增</el-button>
            </div>
            <div class="search">
                <el-input v-model="data.key" style="width: 350px" size="large" placeholder="请输入关键字查询"
                    :suffix-icon="Search" />
            </div>
        </div>

        <div class="dic_main">
            <el-skeleton animated :rows="8" :loading="data.isFisrt">
                <el-table :data="data.data" v-loading="data.loading" style="width: 100%">
                    <el-table-column label="序号" width="70" type="index"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="字典类别" width="160" prop="name">

                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="关键字" width="180">
                        <template #default="scope">
                            <el-tag type="success">
                                {{ scope.row.key }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="值" width="90" prop="value">
                        <template #default="scope">
                            <el-tag>
                                {{ scope.row.value }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="说明" width="140" prop="explain">
                        <template #default="scope">
                            <el-tag>
                                {{ scope.row.explain }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="子级" width="100" prop="count">
                        <template #default="scope">
                            <el-tag type="danger">
                                {{ scope.row.count }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="时间" width="160" prop="time">
                        <template #default="scope">
                            <el-tag type="primary">
                                <el-icon>
                                    <timer />
                                </el-icon>
                                {{ scope.row.time }}
                            </el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column :show-overflow-tooltip="true" label="作者" width="100" prop="author">
                        <template #default="scope">
                            <el-tag>
                                {{ scope.row.author }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="修改人" width="120" prop="up_author">
                        <template #default="scope">
                            <el-tag>
                                {{ scope.row.up_author == null ? "无" : scope.row.up_author }}
                            </el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" prop="name" width="150">
                        <template #default="scope">
                            <el-tooltip class="box-item" effect="light" content="详情" placement="left-start">
                                <el-button type="primary" :icon="Edit" circle @click="event.Detail(scope.row.id)" />
                            </el-tooltip>
                            <el-popconfirm @confirm="event.Delete(scope.row.id)" title="确认删除吗？">
                                <template #reference>
                                    <el-button v-if="scope.row.count === 0" :icon="Delete" type="danger" circle>
                                    </el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="table-foot" style="margin-left: 500px; margin-top: 20px;">
                    <el-pagination background size="small" layout="prev, pager, next"
                        v-model:current-page="data.pages!.page" v-model:page-size="data.pages!.limit"
                        :total="data.pages?.total" />
                </div>
            </el-skeleton>
        </div>

        <el-dialog v-model="data.isModel" :modal="data.isModel">
            <el-descriptions title="新增字典类别" direction="vertical" :column="1" border>
                <el-descriptions-item label="类别名称">
                    <el-input type="text" v-model="data.name">
                    </el-input>
                </el-descriptions-item>

                <el-descriptions-item label="关键字">
                    <el-input type="text" v-model="data.Gjkey">
                    </el-input>
                </el-descriptions-item>

                <el-descriptions-item label="值">
                    <el-input type="text" v-model="data.value">
                    </el-input>
                </el-descriptions-item>

                <el-descriptions-item label="描述">
                    <el-input type="text" v-model="data.explain">
                    </el-input>
                </el-descriptions-item>
            </el-descriptions>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="data.isModel = false">返回</el-button>
                    <el-popconfirm @confirm="event.saveDic" title="确定要保存吗？">
                        <template #reference>
                            <el-button type="primary">
                                确定
                            </el-button>
                        </template>
                    </el-popconfirm>
                </div>
            </template>
        </el-dialog>



    </div>
</template>

<script setup lang="ts">
import { reactive, ref, watchEffect, } from 'vue'
import type { dictionary_Dto } from '@/Dto/Request/dic/dictionary_Dto';
import type { Page_Dto } from '@/Dto/Page_Dto';
import { Add_Dic_Type, Delete_Dic_Type, Get_Dic_Types } from '@/api/dic';
import Api_Code from '@/Dto/Response/Api_code';
import { Timer } from '@element-plus/icons-vue'
import router from '@/router';
import { ElMessage, ElNotification } from 'element-plus';
import { Edit, Delete } from '@element-plus/icons-vue'
import { Search } from '@element-plus/icons-vue'
import { msg } from '@/utils/msg'

const page = reactive<Page_Dto>({
    page: 1,
    limit: 10,
    total: 0,
})

const data = reactive<dictionary_Dto>({
    isFisrt: true,
    loading: false,
    pages: page,
    key: '',
    isModel: false,
    data: [],
    Gjkey: '',
    currentPage: 0

})





const event = {
    //新增类别
    async saveDic() {

        data.isModel = false
        if (data.name == '' || data.value == '' || data.Gjkey == '') {
            ElMessage.error("请完整填写数据");
            return
        }
        data.loading = true
        const res = await Add_Dic_Type({
            name: data.name || '',
            value: data.value || '',
            gjkey: data.Gjkey || '',
            explain: data.explain || ''
        })
        if (res.code === Api_Code.ok) {
            methods.bind()
            data.loading = false
            msg(res)
        } else {
            data.loading = false
            msg(res)
        }


    },
    //打开模态框
    Add() {
        data.isModel = true
    },
    //跳转详情
    Detail(id: string) {
        router.push('/dic/detail/' + id);
    },
    // 删除类别
    async Delete(id: string) {
        data.loading = true;
        const res = await Delete_Dic_Type({
            ids: [id]
        })
        if (res.code === Api_Code.ok) {
            data.loading = false;
            msg(res)
            methods.bind();
        } else {
            msg(res)
        }
    },


}

const methods = {

    //初始化绑定
    async bind() {
        data.loading = true
        const res = await Get_Dic_Types({
            page: data.pages?.page || 1,
            limit: data.pages?.limit || 10,
            key: data.key || ''
        });
        if (res.code === Api_Code.ok) {
            data.data = res.data.data;
            data.pages!.total = res.data.total;
             data.isFisrt = false;
            data.loading = false;
        }

    },


}

watchEffect(async () => {


    await methods.bind();


})


</script>

<style scoped>
.main {
    width: 100%;
    height: calc(100vh - 140px);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 8px;
  
}

.dic_head {
    margin: 10px;
    height: 60px;
    border: 1px solid #eee;
    border-radius: 4px;
    display: flex;
    position: relative;
    top: 8px;
}

.dic_add {
    padding-left: 20px;
    padding-top: 12px;
    flex: 1;
}

.search {
    flex: 3;
    line-height: 50px;
}

.dic_main {
    margin: 8px;
}
</style>